<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#tabs").tabs();
            $("input#app_info").change(function(evt){
                var file = evt.target.files[0];
                if (file.type.match('.json')) {
                    var reader = new FileReader();
                    reader.onload = (function() {
                        return function(e) {
                            var appInfo = $.parseJSON(e.target.result);
                            $('input#uuid').val(appInfo.UUID);
                            $("input#hostname").val(appInfo.hostname);
                        };
                    })(file);
                    reader.readAsText(file, 'UTF-8');
                }
            });
            $("#add").click(function () {
                $.post('/agent', {
                    uuid: $('input#uuid').val(),
                    hostname: $('input#hostname').val(),
                    machineGroup: $('select#machineGroup').val(),
                    identifier: $('input#identifier').val(),
                    displayName: $('input#displayName').val()
                }, function () {
                    $("input#uuid").val("");
                    $("input#hostname").val("");
                    $("input#identifier").val("");
                    $("input#displayName").val("");
                });
            });
            $("#search").click(function () {
                $.getJSON("/agent", function (result) {
                    var selectMachineGroup = $("select#machineGroup");
                    selectMachineGroup.empty()
                    $.map(result, function (agents, machineGroup) {
                        selectMachineGroup.append('<option>' + machineGroup + '</option>');
                        var table = $('#' + machineGroup);
                        if (table.length) {
                            table.children('tbody').empty();
                            $.each(agents, function (index, agent) {
                                table.children('tbody:last-child').append('<tr><td>' + agent['machine-uniqueid'] + '</td><td>' + agent.hostname + '</td><td>' + agent.ip + '</td><td>' + agent['userdefined-id'] + '</td><td>' + agent.displayName + '</td><td>' + new Date(agent.lastHeartbeatTime * 1000).toLocaleString() + '</td></tr>');
                            });
                        }
                    });
                });
            });
        });
    </script>
</head>
<body>
<div class="container-fluid">
    <div class="row justify-content-md-center">
        <div class="w-100">
            <p/>
            <div class="alert alert-success" role="alert">
                <button id="search">Search</button>
                <input type="file" id="app_info"/>
                <label for="uuid">UUID</label>
                <input type="text" id="uuid" name="uuid">
                <label for="hostname">Hostname</label>
                <input type="text" id="hostname" name="hostname">
                <label for="machineGroup">Machine Group</label>
                <select id="machineGroup"></select>
                <label for="identifier">Identifier</label>
                <input type="text" id="identifier" name="identifier">
                <label for="displayName">Display Name</label>
                <input type="text" id="displayName" name="displayName">
                <button id="add">Submit</button>
            </div>
            <p/>
            <div id="tabs">
                <ul>
                    <li><a href="#tabs-1">test-server-side</a></li>
                    <li><a href="#tabs-2">elk</a></li>
                    <li><a href="#tabs-3">yanhu</a></li>
                </ul>
                <div id="tabs-1">
                    <table id="test-server-side" class="table table-striped table-responsive-md">
                        <thead>
                        <tr>
                            <th>machine-uniqueid</th>
                            <th>hostname</th>
                            <th>ip</th>
                            <th>userdefined-id</th>
                            <th>displayName</th>
                            <th>lastHeartbeatTime</th>
                        </tr>
                        </thead>
                        <tbody/>
                    </table>
                </div>
                <div id="tabs-2">
                    <table id="elk" class="table table-striped table-responsive-md">
                        <thead>
                        <tr>
                            <th>machine-uniqueid</th>
                            <th>hostname</th>
                            <th>ip</th>
                            <th>userdefined-id</th>
                            <th>displayName</th>
                            <th>lastHeartbeatTime</th>
                        </tr>
                        </thead>
                        <tbody/>
                    </table>
                </div>
                <div id="tabs-3">
                    <table id="yanhu" class="table table-striped table-responsive-md">
                        <thead>
                        <tr>
                            <th>machine-uniqueid</th>
                            <th>hostname</th>
                            <th>ip</th>
                            <th>userdefined-id</th>
                            <th>displayName</th>
                            <th>lastHeartbeatTime</th>
                        </tr>
                        </thead>
                        <tbody/>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>